<template>
  <div>
    <!-- <div id="main">柱形统计表</div> -->
    <div ref="chartContainer" style="width: 300px; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chartContainer = ref<HTMLDivElement | null>(null)

onMounted(() => {
  const element = chartContainer.value
  if (element) {
    element.style.width = '35rem'
    // ...
  }
  initChart()
})

const initChart = () => {
  if (chartContainer.value) {
    // 创建图表实例
    const chart = echarts.init(chartContainer.value)

    // 配置图表选项
    const options: echarts.EChartsOption = {
      // 图表配置...
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '智  慧  园  林  系  统',
              fontSize: 40,
              // fontWeight: 'bold',
              lineDash: [0, 30],
              lineDashOffset: 0,
              fill: 'transparent',
              stroke: 'skyblue',
              lineWidth: 1
            },
            keyframeAnimation: {
              duration: 3000,
              loop: true,
              keyframes: [
                {
                  percent: 0.7,
                  style: {
                    fill: 'transparent',
                    lineDashOffset: 200,
                    lineDash: [200, 0]
                  }
                },
                {
                  // Stop for a while.
                  percent: 0.8,
                  style: {
                    fill: 'transparent'
                  }
                },
                {
                  percent: 1,
                  style: {
                    fill: '#4682B4'
                  }
                }
              ]
            }
          }
        ]
      }
    }

    // 设置图表数据
    chart.setOption(options)
  }
}
</script>

<style scoped></style>
